<template>
	<div>
		<div class="banner">
			<!--切换的图片部分-->
			<div class="bannerImg" :style="{height:originalData.img_height+'px'}" ref="wrapperContent">
				<img v-if="item" v-for="(item, i) in swipimgage" :key="i" :style="{width:originalData.img_width+'px',height:originalData.img_height+'px',opacity:(i+1)==n?'1':'0'}" class="active" @click="jumpEvent(item)" :src="item.publicityPicture || 'static/image/no_data_banner.png'" />
			</div>
			<!--切换的小按钮部分-->
			<ul class="bannerBtn" :style="{left:(originalData.img_width-12*num)/2+'px'}">
				<li v-for="(v,index) in num" :key="index" :style="{background:v==n?'#ff7800':''}" @click='change(v)' class='aBtn'>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import { mapGetters,mapMutations } from "vuex";
	import { NAVIGATE } from "../../../config/postMessage-types";
	import handlePath from "../../../utils/lxn/handlePath"
	export default {
		props: {
			swipimgage: {
				type: Array,
				default: () => []
			},
			swipimgagewidth: "",
			swipimgageheight: ""
		},
		data() {
			return {
				originalData: {
					img_width: this.swipimgagewidth,
					img_height: this.swipimgageheight,
				},
				n: 1,
				// 图片的index。
				bFlag: true, // 锁定
				timer1: '',
				// 这是bFlag定时器的数据
				timer2: '',
				// 这是自动播放（next（））定时器的数据
				timer3: '',
				// 这是打开浏览器时，初始运动定时器的数据
				/*----------------*/
				startx: '',
				offsetx: 0,
				startTime: '',
			}
		},
		computed: {
			num() {
				return this.swipimgage.length;
			},
			isApp() {
				return window.isApp;
			},
			...mapGetters('wxh', [
                'userInfo'
            ]),
            hasUserInfo() {
                return Object.keys(this.userInfo).length;
            },
		},
		methods: {
			...mapMutations('xxy', [
				"setpopupVisible",
				"setactivePic",
				"setstoptouch"
			]),
			jumpEvent(item) {
				if (!item.extendField) return;
				if (!this.isApp) {
					// var urldata = JSON.parse(item.extendField).url.path
					var urldata = handlePath(item)
					if(urldata) {
						this.$router.push({
							path : urldata
							// name: "MiddleWare",
							// params: {
							// 	pageName: urldata
							// }
						})
					}
				} else if (this.isApp){
					var urldata = JSON.parse(item.extendField).url
					if(!urldata){return}
					if(urldata.valueArray[0] == '商品详情页面' ) {
						this.gotornpage('Detail', urldata.path.split("=")[1])
					} else if(urldata.valueArray[0] == '分类页面'){
						this.gotornpage('GoodsClassify', urldata.path.split("=")[1])
					}else if(urldata.valueArray[0] == '其他页面') {
						if(urldata.path == 'IntegralBuy') {
							if(this.hasUserInfo ===0) {
								this.gotornpage('Login')
							}else{
								this.gotornpage(urldata.path)
							}
						}else if(urldata.path == 'Coupons'){
							this.gotornpage('CouponsAcquire')
						} else if (urldata.path == 'buyGiftCard') {
							if(this.hasUserInfo ===0) {
								this.gotornpage('Login')
							} else{
								this.gotornpage('BuyGiftCard')
							}
						} else if(urldata.path == 'foodChecked'){
							if(this.hasUserInfo ===0) {
								this.gotornpage('Login')
							}
							else{
								this.gotornpage('FoodCheck')
							}
						} else if(urldata.path == 'prize_card'){
								if(this.hasUserInfo ===0) {
									this.gotornpage('Login')
								} else {
								this.$router.push({
									name: "MiddleWare",
									params: {
										pageName: urldata.path
									}
								})
							}
						} else if(urldata.path == 'integral'){
							console.log("urldata.path",urldata.path)
								if(this.hasUserInfo ===0) {
									this.gotornpage('Login')
								} else {
								this.$router.push({
									name: "MiddleWare",
									params: {
										pageName: urldata.path
									}
								})
							}
						} else if(urldata.path == 'login'){
							this.gotornpage('Login')
						} else if(urldata.path == 'register'){
							this.gotornpage('Regrester')
						} else {
							this.$router.push({
								name: "MiddleWare",
								params: {
									pageName: urldata.path
								}
							})
						}
					}
				}
			},
			gotornpage(page, code) {
				let params = {}
				if(page=='Detail'){
					params = {
						screen: page,
						params:{
							goodsCode: code
						}
					}
				}else if(page=='GoodsClassify'){
					params = {
						screen: page,
						params:{
							classCode: code
						}
					}
				} else {
					params = {
						screen: page,
					}
				}
				let goBackIns = {
					type: NAVIGATE,
					params: params
				}
				window.postMessage(JSON.stringify(goBackIns));
			},
			next() {
				// 下一张
				// 为了避免连续点击。让bFlag运动结束后再变为true。
				if(this.bFlag) {
					this.bFlag = false;
					this.clearT(); // 运动之前，清除所有定时器。
					this.n = this.n + 1 == this.swipimgage.length + 1 ? 1 : this.n + 1;　 // 下一张，如果是最后一张，就返回第一张。
					// 调用timeout函数，延迟进入下一次轮播，以便可以点击切换。
					this.timeout();
				}
			},
			clearT() {
				// 清除所有定时器
				clearTimeout(this.timer1);
				clearTimeout(this.timer2);
				clearTimeout(this.timer3);
			},
			timeout() {
				// 运动结束后设置bFlag为true，并且3秒后调用next，进行下一次运动。
				// 运动时间是1s。
				this.timer2 = setTimeout(() => {
					this.bFlag = true
				}, 1000);
				this.timer1 = setTimeout(() => {
					this.next()
					this.bFlag = true
				}, 1500);
			},
			change(v) {
				// 点击按钮，切换到对应图片，需要获取index。
				if(this.bFlag) {
					this.bFlag = false;
					this.clearT();
					this.n = v; // 将显示图片变为选中的那一张。
					this.timeout()
				}
			},
			go(inx) {
				/*if(this.bFlag) {
					this.bFlag = false;*/
				this.clearT(); // 运动之前，清除所有定时器。
				if(this.n + inx == this.swipimgage.length + 1 && inx > 0) {
					console.log(this.n, "111111111")
					this.n = 1
				} else if(this.n + inx == 0 && inx < 0) {
					this.n = this.swipimgage.length
				} else {
					this.n = this.n + inx
				}
				// 调用timeout函数，延迟进入下一次轮播，以便可以点击切换。
				this.timeout();
				/*}*/
			},
			touch() {
				var self = this;
				var startHandler = function(evt) {
					self.setstoptouch(false)
					self.offsetx = 0;
					self.startTime = new Date * 1;
				};
				var moveHandler = function(evt) {
					evt.preventDefault();
					self.offsetx = evt.touches[0].pageX - self.startx;

				};
				var endHandler = function(evt) {
					var boundary = self.originalData.img_width / 6;
					var endTime = new Date() * 1;
					if(endTime - self.startTime > 800) {
						if(self.offsetx >= boundary) {
							self.go(-1)
							//进入前一张
						} else if(self.offsetx < -boundary) {
							self.go(1)
							//进入后一张
						} else {
							self.go(0)
							//留在本页
						}
					} else {
						if(self.offsetx > 50) {
							self.go(-1)
							//进入前一张
						} else if(self.offsetx < -50) {
							self.go(1)
							//进入后一张
						} else {
							self.go(0)
							//留在本页
						}
					};
				};
				var node = this.$refs.wrapperContent;
				node.addEventListener("touchstart", startHandler);
				node.addEventListener("touchmove", moveHandler);
				node.addEventListener("touchend", endHandler);
			}

		},
		mounted() {
			this.timer3 = setTimeout(this.next, 1500);
			this.touch()
		},
		watch: {
			swipimgage() {
				this.clearT()
				this.timer3 = setTimeout(this.next, 1500);
			}
		},
		created() {

		},

	}
</script>

<style>
	.banner {
		position: relative;
	}
	
	.bannerImg {
		position: relative;
		/*height: 360px;*/
		overflow: hidden;
	}
	
	.bannerImg img {
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.bannerImg img.active {
		transition: all 1s;
	}
	
	.bannerBtn {
		position: absolute;
		/*left: 50%;*/
		bottom: 22px;
		text-align: center;
		z-index: 2;
	}
	
	.bannerBtn li {
		margin: 0 3px;
		width: 6px;
		height: 6px;
		border-radius: 6px;
		float: left;
		background: rgba(255, 255, 255, .4);
	}
	
	.bannerBtn li.aBtn {
		transition: all .3s ease;
	}
</style>